Marko: Deklarativt UI med strømmende server-side rendering

I dagens raske digitale landskap er nettsidens ytelse avgjørende. En treg eller lite responsiv nettside kan føre til frustrerte brukere, høyere fluktfrekvens og til syvende og sist, tapt omsetning. Marko, et deklarativt UI-rammeverk, tar tak i disse problemene ved å tilby en unik tilnærming til å bygge høyytelses-nettapplikasjoner. Denne artikkelen vil dykke ned i kjernefunksjonene til Marko, spesielt dens kapabiliteter for strømmende server-side rendering (SSR), og forklare hvorfor det er et overbevisende valg for utviklere som bygger nettsider og nettapplikasjoner for et globalt publikum.

Hva er Marko?

Marko er et åpen kildekode UI-rammeverk laget av eBay og vedlikeholdes nå av Marko-teamet. Det skiller seg fra andre rammeverk gjennom sitt fokus på ytelse, enkelhet og skalerbarhet. I motsetning til noen rammeverk som prioriterer klient-side rendering, legger Marko vekt på server-side rendering, spesielt strømmende SSR. Dette betyr at serveren forhåndsrenderer HTML-koden for applikasjonen din og sender den til nettleseren i biter (strømmer) etter hvert som den blir tilgjengelig, noe som fører til en raskere First Contentful Paint (FCP) og forbedret brukeropplevelse.

Nøkkelfunksjoner og fordeler med Marko

• Deklarativ syntaks: Marko bruker en deklarativ syntaks som ligner på HTML, noe som gjør den enkel å lære og bruke. Denne enkelheten reduserer læringskurven for utviklere og lar dem fokusere på å bygge funksjoner i stedet for å slite med komplekse rammeverkskonsepter.
• Strømmende server-side rendering (SSR): Dette er uten tvil Markos kraftigste funksjon. Strømmende SSR lar serveren sende HTML til nettleseren trinnvis, så snart den er klar, i stedet for å vente på at hele siden skal renderes. Dette forbedrer den opplevde ytelsen til nettsiden betydelig, spesielt for brukere med tregere internettforbindelser eller de som besøker siden fra geografisk fjerne steder. Tenk deg en bruker på landsbygda i India som besøker en nettside bygget med Markos strømmende SSR. De vil begynne å se innholdet mye raskere sammenlignet med en nettside som kun baserer seg på klient-side rendering, som må laste ned all JavaScript før noe kan vises.
• Automatisk kodedeling (Code Splitting): Marko deler automatisk JavaScript-koden din i mindre biter og laster dem ved behov, noe som minimerer den opprinnelige nedlastingsstørrelsen og forbedrer innlastingstiden. Dette er avgjørende for mobilbrukere og de med begrenset båndbredde.
• Komponentbasert arkitektur: Marko fremmer en komponentbasert arkitektur, som lar deg bryte ned applikasjonen din i gjenbrukbare, håndterbare deler. Dette forbedrer kodeorganisering, vedlikeholdbarhet og testbarhet.
• HTML-lignende syntaks med utvidelser: Markos syntaks utvider HTML med funksjoner som komponenter, løkker og betinget rendering, noe som gjør den intuitiv for utviklere som er kjent med HTML. For eksempel kan du enkelt lage en gjenbrukbar knappekomponent og bruke den gjennom hele applikasjonen.
• Optimalisert for SEO: Server-side rendering gjør nettsiden din lettere å gjennomsøke for søkemotorroboter, noe som forbedrer rangeringen din i søkemotorer. Dette er en betydelig fordel for bedrifter som ønsker å tiltrekke seg organisk trafikk til sine nettsider.
• Liten pakkestørrelse (Bundle Size): Marko har en relativt liten kjøretidsstørrelse sammenlignet med andre populære rammeverk, noe som ytterligere bidrar til raskere innlastingstider.
• Progressiv forbedring (Progressive Enhancement): Marko oppmuntrer til progressiv forbedring, slik at nettsiden din kan fungere selv om JavaScript er deaktivert eller ikke klarer å laste inn. Dette sikrer en bedre brukeropplevelse for alle besøkende, uavhengig av nettleserens kapabiliteter.
• Innebygde optimaliseringer: Marko inkluderer ulike innebygde optimaliseringer, som mal-caching og DOM-diffing, som ytterligere forbedrer ytelsen.
• Enkel integrasjon: Marko kan enkelt integreres med eksisterende Node.js-backender og andre front-end-verktøy.

Et dypdykk i strømmende server-side rendering

La oss utforske fordelene med strømmende SSR mer detaljert:

Forbedret First Contentful Paint (FCP)

FCP er en nøkkelmetrikk for å måle nettsiders ytelse. Den representerer tiden det tar før det første innholdet (tekst, bilde, etc.) vises på skjermen. Strømmende SSR reduserer FCP betydelig fordi nettleseren begynner å motta og rendere HTML mye tidligere enn med klient-side rendering. I stedet for å vente på at hele JavaScript-pakken skal lastes ned og kjøres, kan nettleseren umiddelbart begynne å vise det første innholdet på siden. Tenk deg en e-handelsnettside som viser produktlister. Med strømmende SSR ser brukeren produktbilder og beskrivelser nesten umiddelbart, selv før de interaktive elementene er fullt lastet. Dette skaper en mye mer engasjerende og responsiv brukeropplevelse.

Bedre brukeropplevelse

En raskere FCP oversettes til en bedre brukeropplevelse. Brukere er mindre tilbøyelige til å forlate en nettside hvis de ser innhold raskt. Strømmende SSR gir en mer flytende og responsiv opplevelse, spesielt på tregere nettverk eller enheter. Dette er spesielt viktig for mobilbrukere i utviklingsland der internettforbindelsen kan være upålitelig. For eksempel kan en nyhetsnettside som bruker strømmende SSR levere siste nytt-overskrifter og sammendrag umiddelbart, selv til brukere med begrenset båndbredde.

SEO-fordeler

Søkemotorroboter er avhengige av HTML-innhold for å forstå strukturen og innholdet på en nettside. Server-side rendering gir lett tilgjengelig HTML, noe som gjør det enklere for søkemotorer å gjennomsøke og indeksere siden din. Dette forbedrer rangeringen din i søkemotorer og øker organisk trafikk. Selv om Google har blitt bedre til å rendere JavaScript, gir SSR fortsatt en betydelig fordel, spesielt for nettsider med komplekse JavaScript-tunge applikasjoner. Et reisebyrås nettside som bruker SSR, vil få sine destinasjonssider korrekt indeksert, noe som sikrer at de vises i relevante søkeresultater.

Forbedret tilgjengelighet

SSR bidrar til bedre tilgjengelighet ved å levere HTML-innhold som enkelt kan tolkes av skjermlesere og andre hjelpeteknologier. Dette sikrer at nettsiden din er brukbar for personer med nedsatt funksjonsevne. Ved å rendere det opprinnelige innholdet på serveren, gir du et solid grunnlag for tilgjengelighet, selv før JavaScript er fullt lastet. For eksempel vil en offentlig nettside som bruker SSR sikre at alle borgere, uavhengig av deres evner, kan få tilgang til viktig informasjon.

Marko vs. andre rammeverk

Hvordan måler Marko seg mot andre populære UI-rammeverk som React, Vue og Angular?

Marko vs. React

React er et mye brukt bibliotek for å bygge brukergrensesnitt. Selv om React kan brukes med server-side rendering (ved hjelp av Next.js eller lignende rammeverk), baserer det seg vanligvis på klient-side rendering som standard. Markos strømmende SSR gir en ytelsesfordel over Reacts tradisjonelle SSR-tilnærming. Reacts økosystem er enormt og tilbyr mange biblioteker og verktøy, men dette kan også føre til kompleksitet. Marko fokuserer på enkelhet og ytelse, og tilbyr en mer strømlinjeformet utviklingsopplevelse. Tenk på en kompleks dashbord-applikasjon. Mens React tilbyr en komponentbasert tilnærming, kan Markos strømmende SSR gi en ytelsesboost for den første sideinnlastingen, spesielt ved visning av store datasett.

Marko vs. Vue

Vue er et annet populært rammeverk kjent for sin brukervennlighet og progressive tilnærming. Vue støtter også server-side rendering (ved hjelp av Nuxt.js). Marko og Vue deler noen likheter når det gjelder enkelhet og komponentbasert arkitektur. Imidlertid tilbyr Markos strømmende SSR en distinkt ytelsesfordel, spesielt for nettsider med høy trafikk eller komplekse brukergrensesnitt. Vue krever ofte mer manuell optimalisering for server-side rendering for å oppnå optimal ytelse. For eksempel kan en sosial medie-nettside dra nytte av Markos strømmende SSR for raskt å vise brukerfeeder og oppdateringer.

Marko vs. Angular

Angular er et fullverdig rammeverk som gir en omfattende løsning for å bygge komplekse nettapplikasjoner. Angular støtter server-side rendering gjennom Angular Universal. Imidlertid kan Angular være mer komplekst å lære og bruke sammenlignet med Marko og Vue. Markos fokus på enkelhet og ytelse gjør det til et overbevisende alternativ for prosjekter der ytelse er en topp prioritet. En stor bedriftsapplikasjon kan velge Angular for sine robuste funksjoner og skalerbarhet, men en mindre oppstartsbedrift kan velge Marko for sin hastighet og enkle utvikling.

Oppsummert: Mens React, Vue og Angular alle støtter server-side rendering, gir Markos innebygde strømmende SSR en betydelig ytelsesfordel. Marko prioriterer ytelse og enkelhet, noe som gjør det til et godt valg for prosjekter der disse faktorene er kritiske.

Kom i gang med Marko

Å komme i gang med Marko er relativt enkelt. Her er en grunnleggende oversikt:

1. Installer Node.js: Sørg for at du har Node.js installert på systemet ditt.
2. Installer Marko CLI: Kjør `npm install -g marko-cli` for å installere Markos kommandolinjegrensesnitt globalt.
3. Opprett et nytt Marko-prosjekt: Bruk kommandoen `marko create mitt-prosjekt` for å opprette et nytt Marko-prosjekt.
4. Utforsk prosjektstrukturen: Prosjektet vil inneholde filer som `index.marko` (din hovedkomponent), `server.js` (ditt inngangspunkt på serversiden), og `marko.json` (din prosjektkonfigurasjon).
5. Kjør utviklingsserveren: Bruk kommandoen `npm start` for å starte utviklingsserveren.
6. Begynn å bygge dine komponenter: Opprett nye `.marko`-filer for komponentene dine og importer dem inn i hovedkomponenten din.

Eksempel på Marko-komponent (index.marko):

            
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Marko Eksempel</title>
  <!MARKUPROCESSED>
</head>
<body>
  <h1>Hallo, verden!</h1>
  <p>Dette er en enkel Marko-komponent.</p>
</body>
</html>

            

              
                Copy
              
            
          

Eksempel på server-side rendering (server.js):

            
require('marko/node-require').install();
require('marko/compiler').configure({
  resolveCssUrls: true,
  cache: true
});

const express = require('express');
const marko = require('marko');
const template = marko.load(require.resolve('./index.marko'));

const app = express();

app.get('/', (req, res) => {
  template.render({}, res);
});

app.listen(3000, () => {
  console.log('Server startet på port 3000');
});

            

              
                Copy
              
            
          

Dette er bare grunnleggende eksempler for å komme i gang. Marko tilbyr et vell av funksjoner og alternativer for å bygge komplekse nettapplikasjoner. Se den offisielle Marko-dokumentasjonen for mer detaljert informasjon.

Eksempler på Marko i bruk fra den virkelige verden

Selv om eBay opprinnelig utviklet Marko, brukes det nå av en rekke selskaper i forskjellige bransjer:

• eBay: eBay bruker Marko i stor utstrekning for sin kjerneplattform, noe som demonstrerer dens evne til å håndtere høy trafikk og komplekse brukergrensesnitt.
• Lazada (Sørøst-Asia): En stor e-handelsplattform i Sørøst-Asia (eid av Alibaba) bruker Marko for å forbedre ytelsen og levere en bedre handleopplevelse til sine brukere i ulike land med varierende internetthastigheter.
• Tallrike oppstartsbedrifter og foretak: Mange andre selskaper tar i bruk Marko for dets ytelsesfordeler og brukervennlighet.

Disse eksemplene viser Markos allsidighet og egnethet for et bredt spekter av nettapplikasjoner.

Beste praksis for bruk av Marko

For å få mest mulig ut av Marko, vurder disse beste praksisene:

• Utnytt strømmende SSR: Dra full nytte av Markos kapabiliteter for strømmende SSR for å forbedre FCP og brukeropplevelse.
• Optimaliser komponentene dine: Optimaliser Marko-komponentene dine for ytelse ved å minimere DOM-oppdateringer og unngå unødvendige re-rendringer.
• Bruk kodedeling: Benytt deg av Markos automatiske kodedelingsfunksjon for å redusere den opprinnelige nedlastingsstørrelsen på JavaScript-koden din.
• Vurder tilgjengelighet: Sørg for at nettsiden din er tilgjengelig ved å følge retningslinjer for tilgjengelighet og bruke semantisk HTML.
• Test applikasjonen din grundig: Test applikasjonen din på forskjellige enheter og nettlesere for å sikre en konsistent og pålitelig brukeropplevelse.

Konklusjon: Marko – et kraftig valg for moderne webutvikling

Marko er et kraftig og allsidig UI-rammeverk som tilbyr en overbevisende løsning for å bygge høyytelses-nettapplikasjoner. Dets deklarative syntaks, kapabiliteter for strømmende SSR og fokus på enkelhet gjør det til et utmerket valg for utviklere som ønsker å forbedre nettsidens ytelse, forbedre brukeropplevelsen og øke SEO. Ved å ta i bruk Marko kan utviklere skape nettsider og nettapplikasjoner som er raske, responsive og tilgjengelige for brukere over hele verden. Enten du bygger en liten personlig nettside eller en stor bedriftsapplikasjon, er Marko verdt å vurdere som ditt valg av UI-rammeverk. Dets vekt på å levere innhold raskt og effektivt gjør det spesielt relevant i dagens globaliserte og ytelsesdrevne digitale landskap.

Videre ressurser:

• Offisiell Marko-nettside
• Marko GitHub-repositorium
• Marko-dokumentasjon